<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="h45">
				<view class="fix-wrap">
					<view class="h45 search-bar">
						<view class="search-form">
							<view class="icon sc-icon iconfont">&#xe61e;</view>
							<input type="text" class="sc-inp" v-model="params.keyword" placeholder="输入关键词搜索" @input="search">
							<!-- <view v-if="params.keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view> -->
						</view>
					</view>
					<view class="h45">
						<!-- <view class="filter-bar"> 
							<view class="item" @click.stop="showFilter(1)">
								<view class="name">{{filter_data.select_type_name||'项目类型'}}</view>
								<view class="iconfont f-s60">&#xeb8b;</view>
							</view>
							<view class="item" @click.stop="showFilter(2)">
								<view class="name">{{filter_data.select_status_name||'设备状态'}}</view>
								<view class="iconfont f-s60">&#xeb8b;</view>
							</view>
						</view> -->

						<!-- 筛选区域 -->
						<view v-if="filter_data.isShowFilter" class="filter-select-page" @click="hideFilter">
							<!-- 项目类型 -->
							<template v-if="filter_data.isShowProjectType">
								<view class="filter-select-list">
									<view class="item" v-for="(item,index) in filter_data.type" :key="index" @click="filterDataByType(item.protype)">
										<view class="val">{{item.name}}</view>
										<view class="icon">
											<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
										</view>
									</view>
								</view>
							</template>

							<!-- 项目状态 -->
							<template v-if="filter_data.isShowProjectStatus">
								<view class="filter-select-list">
									<view class="item" v-for="(item,index) in filter_data.status" :key="index" @click="filterDataByStatus(item.finish)">
										<view class="val">{{item.name}}</view>
										<view class="icon">
											<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="body">
				<view class="list-wrap">

					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>

					<template v-else>
						<template v-if="true">
							<!-- 监理 -->
							<view class="dev-item" v-for="(item,index) in list" :key="index">
								<navigator :url="`/package_zhinengjiance/detail/detail?number=${item.sb_number2}&dev_id=${item.device_id}`" hover-class="none" class="item">
									<view class="pic">
										<!-- <image src="@/static/images/pro_jl.png" mode="widthFix"></image> -->
									</view>
									<view class="info">
										<!-- <view class="name">id:{{item.id}}</view> -->
										<!-- <view class="name">device_id:{{item.device_id}}</view> -->
										<!-- <view class="name">二维码:{{item.sb_number2}}</view> -->
										<view class="name">设备编号:{{item.device_number}}</view>
										<view class="params">
											<view class="text">激活时间：{{item.scan_time}}</view>
										</view>
									</view>
								</navigator>
								<view class="state" v-if="item.device_status==1">{{item.device_status==1&&item.isWork?'正在作业':'作业完成'}}</view>
							</view>


							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>

					</template>


				</view>
			</view>
			<!-- <view class="footer">
				<view class="fix-wrap ">
					<navigator url="/package_zhinengjiance/form/form" hover-class="none" class="created-btn">添加设备</navigator>
				</view>
			</view> -->
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				type: 1,
				list: [],
				total: 0,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				appid: getApp().globalData.appid,
				web_host: getApp().globalData.web_host,
				params: {
					page: 1,
					limit: 10,
					finish: '0', // 默认未完成
					protype: '2', // 默认监测项目
					type_code: 'pc_pro',
					keyword: '',
					datatype: '',
				},
				filter_data: {
					all_active: 0,
					pro_active: 2,
					sta_active: 0,
					isShowFilter: false,
					isShowProjectType: false,
					isShowProjectStatus: false,
					select_type_name: '监测普查',
					select_status_name: '未完成',
					type: [{
							name: '监测普查',
							check: true,
							type_code: 'pc_pro',
							protype: 2
						},
						{
							name: '疫情防控',
							check: false,
							type_code: 'fk_pro',
							protype: 1
						},
						{
							name: '监督监理',
							check: false,
							type_code: 'jl_pro',
							protype: 3
						},
						{
							name: '抽样调查',
							check: false,
							type_code: 'cy_pro',
							protype: 6
						}
					],
					status: [{
							name: '未完成',
							check: true,
							finish: 0
						},
						{
							name: '已完成',
							check: false,
							finish: 1
						}
					]
				}
			}
		},
		onShow() {
			// if (this.list.length) {
			// 	console.log('onshow');
			// 	this.$nextTick(() => {
			// 		this.list.forEach(it => {
			// 			let startTime = new Date(it.scan_time);
			// 			let targetTime = new Date(startTime.setMinutes(startTime.getMinutes() + Number(it.camera_interval)));
			// 			let curTime = new Date();
			// 			this.$set(it, 'isWork', targetTime.getTime() > curTime.getTime());
			// 		})
			// 	})
			// }
		},
		async onLoad() {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getList();
			}
		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.params.page = 1;
				return false
			} else {
				if (this.list.length < this.total && this.list.length > 0) {
					this.params.page++;
					this.getList();
				}
			}
		},
		methods: {

			// 
			dataInit: function() {
				this.params.page = 1;
				this.list = [];
				this.loadingState.default = true;
				this.loadingState.loading = false;
				this.loadingState.completed = false;
			},

			// 获取列表
			getList: async function() {
				let res = await this.$api.zncp_api.getDevList({
					page: this.params.page,
					limit: this.params.limit,
					keyword: this.params.keyword,
					appid: this.appid,
					token: this.token,
					user_id:this.userInfo.uid
				})
				console.log(res);
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					this.loadingState.loading = true;
					this.total = res.data.data.count;

					res.data.data.list.forEach(it => {
						let startTime = new Date(it.scan_time);
						let targetTime = new Date(startTime.setMinutes(startTime.getMinutes() + Number(it.camera_interval)));
						let curTime = new Date();
						this.$set(it, 'isWork', targetTime.getTime() > curTime.getTime());
					})
					this.list = this.list.concat(res.data.data.list);
					if (this.list.length >= this.total) {
						this.loadingState.default = false;
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					}
				} else {
					this.loadingState.default = false;
				}
			},

			// 搜索
			search: function() {
				this.dataInit();
				this.getList();
			},

			// 清空搜索词
			clearKeyword: function() {
				this.params.keyword = '';
				this.dataInit();
				this.getList();
			},

			// 打开过滤
			showFilter: function(type) {
				// type 筛选条件  1 类型  2 状态		 		

				if (type == 1) {
					this.filter_data.isShowFilter = true;
					this.filter_data.isShowProjectType = true;
					this.filter_data.isShowProjectStatus = false;
					this.filter_data.pro_active = type;
					this.filter_data.all_active = null;
					this.params.datatype = 'pc';
				} else if (type == 2) {
					this.filter_data.isShowFilter = true;
					this.filter_data.isShowProjectType = false;
					this.filter_data.isShowProjectStatus = true;
					this.filter_data.sta_active = type;
					this.filter_data.all_active = null;
					this.params.datatype = 'pc';
				} else if (type == 0) {
					this.filter_data.isShowFilter = false;
					this.filter_data.isShowProjectType = false;
					this.filter_data.all_active = type;
					this.filter_data.sta_active = '';
					this.filter_data.pro_active = '';
					this.params.type_code = 'getall';
					this.params.protype = '';
					this.params.finish = '';
					this.params.datatype = 'jl';
					this.filter_data.select_status_name = '';
					this.filter_data.select_type_name = '';
					this.filter_data.type.forEach(item => {
						item.check = false;
					})
					this.filter_data.status.forEach(item => {
						item.check = false;
					})
					this.dataInit();
					this.getList();
				}
			},

			// 关闭过滤
			hideFilter: function() {
				this.filter_data.isShowFilter = false;
				this.filter_data.isShowProjectStatus = false;
				this.filter_data.isShowProjectType = false;
			},

			// 类型过滤
			filterDataByType: function(protype) {
				this.dataInit();
				this.filter_data.type.forEach(item => {
					item.check = false;
					if (item.protype == protype) {
						this.filter_data.select_type_name = item.name;
						this.params.protype = item.protype;
						this.params.type_code = item.type_code;
						item.check = true;
						this.getList();
					}
				})
			},

			// 状态过滤
			filterDataByStatus: function(finish) {
				this.dataInit();
				this.filter_data.status.forEach(item => {
					item.check = false;
					if (item.finish == finish) {
						this.filter_data.select_status_name = item.name;
						this.params.finish = item.finish;
						item.check = true;
						this.getList();
					}
				})
			},

			// 调整详情
			jump(e, status) {
				uni.navigateTo({
					url: `/package_智/fk_pro/projectDetail/projectDetail?pid=${pid}&pro_type=${pro_type}&union_pid=${union_pid}`
				})
			}


		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.filter-select-page {
		top: 90px
	}

	.list-wrap {
		padding-top: 20rpx;

		.dev-item {
			background: #fff;
			margin-bottom: 20rpx;
		}

		.state {
			margin: 0 20rpx;
			padding: 20rpx 0;
			border-top: 1rpx solid #eee;
			text-align: right;
			font-size: 30rpx;
			color: #666;
		}

		.item {
			position: relative;
			display: flex;
			padding: 30rpx 20rpx;

			.pic {
				width: 110rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				image {
					width: 100%;
				}
			}

			.info {
				flex-grow: 2;

				.name {
					margin-bottom: 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.params {
					margin-bottom: 10rpx;
					padding-left: 10rpx;
					font-size: 30rpx;
					color: #999;

					.text {
						margin-bottom: 8rpx;
					}
				}
			}

			.status {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
				width: 140rpx;
				color: #fff;
				text-align: center;
				font-size: 30rpx;

				image {
					width: 100%;
				}
			}

			.sh-status {
				position: absolute;
				right: 0;
				top: 0;
			}

		}
	}

	.created-btn {
		width: 96%;
		height: 80rpx;
		margin: 10rpx auto;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>